<template>
  <div class="store-repair-index">
    <div class="app-main">
      <div class="module-my-store" :class="{active:isShowStore==true}">
        <div class="store-header" @click="handleShowStore">
          <span class="title">{{currentName}}</span>
        </div>
        <div class="store-body">
          <ul class="store-list">
            <li class="item" v-for="(item,index) in storeList" :class="{active:curIndex==index}" @click="handleSelectStore(item,index)">
              <span class="iconfont icon-dianpuguanlipx"></span>
              <span class="item-title">{{item.shopName}}</span>
            </li>
          </ul>
      </div>
      </div>
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in slidebox" :key="index">
          <img :src="item.thumb">
        </mt-swipe-item>
      </mt-swipe>
      <div class="module-qiangdan" @click="handleGoGrabsheet" v-if="storeType=='3501'">
        <span class="iconfont icon-laba">抢单中心：<span style="color: #999">您有<span class="count">5</span>条待抢工单，点击查看。</span></span>
      </div>
      <ul class="module-list">
        <li class="item" v-for="(item,index) in slideList">
          <router-link class="item-content" :to="{path:item.name}">
            <div class="item-iconfont"><span :class="['iconfont',item.icon]" :style="{background:(item.background)}"></span></div>
            <div class="item-title">{{item.remark}}</div>
          </router-link>
        </li>
      </ul>
    </div>
    <footerNav v-bind:current="0" v-bind:storeType="storeType"></footerNav>
  </div>
</template>
<script>
  import { Swipe, SwipeItem,MessageBox } from 'mint-ui';
  import footerNav from '../../common/footer-nav.vue';
  import {getCurrentUserList} from '@/api/user'
  export default{
    components:{
      footerNav
    },
    data () {
      return {
        currentName:'',
        curIndex:0,
        storeList:[],
        isShowStore:false,
        slidebox:[
          {
            id:1,
            thumb:'static/img/cs.jpg'
          }
        ],
        storeType:'',
        slideList:[],

        slideListType1:[
          {
            name:'push-order-list2',
            remark:'工单管理',
            icon:'icon-quanbudingdan',
            background:'#c34853',
          },
          {
            name:'push-order-list',
            remark:'预约单',
            icon:'icon-quanbudingdan',
            background:'#c34853',
          },
          {
            name:'insurance-quote',
            remark:'保险报价',
            icon:'icon-baojia1',
            background:'#63bd65',
          },
          {
            name:'product-management',
            remark:'商品管理',
            icon:'icon-shangpinguanli',
            background:'#3175fb',
          },{
            name:'purchasing-management',
            remark:'采购单',
            icon:'icon-webicon05',
            background:'#c6872d',
          },
          {
            name:'sale-management',
            remark:'销售单',
            icon:'icon-xiaoshoudan',
            background:'#63bd65',
          },
          {
            name:'customer-management',
            remark:'客商管理',
            icon:'icon-kehuguanli',
            background:'#3175fb',
          },
          {
            name:'inventory-management',
            remark:'库存管理',
            icon:'icon-shishikucunshiyitu',
            background:'#c6872d',
          },
          {
            name:'cancel-coupon',
            remark:'卡券核销',
            icon:'icon-kaquan',
            background:'#63bd65',
          },{
            name:'all-function',
            remark:'全部功能',
            icon:'icon-fenlei-',
            background:'#c34853',
          },
        ],
        slideListType2:[],
        slideListType3:[
          {
            name:'app-carmodel-search',
            remark:'在线报修',
            icon:'icon-traffic',
            background:'#c34853',
          },
          {
            name:'report-order-list',
            remark:'报修历史',
            icon:'icon-quanbudingdan',
            background:'#63bd65',
          },
          {
            name:'car-management',
            remark:'车辆档案',
            icon:'icon-xiaotuziCduan-',
            background:'#3175fb',
          },
          {
            name:'app-3c-search',
              remark:'3C查询',
            icon:'icon-info-query',
            background:'#c6872d',
          },

        ],
      }
    },
    mounted(){
      this.storeType=sessionStorage.getItem('storeType');
      if(this.storeType=='3501'){
        this.slideList=this.slideListType1;
      }else if(this.storeType=='3502'){
        this.slideList=this.slideListType2;
      }else if(this.storeType=='3506'){
        this.slideList=this.slideListType3;
      }else{
        this.slideList=this.slideListType3;
      }
      this.currentName=sessionStorage.getItem('currentName');
      getCurrentUserList().then((resData)=>{
        if(resData.object!=null){
        this.storeList=resData.object;
        for(var i=0;i<this.storeList.length;i++){
          if(this.currentName==this.storeList[i].shopName){
            this.curIndex=i
          }
        }
      }
    });
    },
    methods:{
      handleToFunction(item){
        console.log(item.name)
        if(item.name=='customer-management'){

          sessionStorage.removeItem('isAddOrder');
          this.$router.push({path:'/customer-management'})
        }
      },
      handleGoGrabsheet(){
        this.$router.push({path:'/app-grabsheet-list'})
      },
      handleShowStore(){
        if(this.isShowStore==false){
          this.isShowStore=true;
        }else{
          this.isShowStore=false;
        }
      },
      handleSelectStore(item,index){

        var params = new URLSearchParams();

        params.append('form.userId', item.userId);
        this.$axios({
          method: 'post',
          url:'gp/bu/user!switchUser.do',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){

          this.currentName=item.shopName
          this.curIndex=index;
          this.isShowStore=false;
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1000
          });
          return false;

        }
      }).catch(function (error) {
          alert(error);
        });;
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">

  .store-repair-index{
    background: #f5f5f5;
    overflow-x: hidden;
    .app-main{
      padding:0 0 62px;
    }
    .app-header{
      padding:0 0 12px;
      text-align: center;
    }
    .mint-swipe{
      height:160px;
      text-align: center;
      img{
        height: 100%;
      }
    }
    .module-list{
      display: flex;
      flex-wrap:wrap;
      padding:6px 6px;
      .item{
        display: flex;
        width: 50%;
        padding:6px;
      }
      .item-content{
        background: #fff;
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.02);
        flex-wrap:wrap;
        width: 100%;
        padding:28px 0;
        border-radius:3px;
        justify-content:center;
        font-size: 15px;
        color: #333;
        text-align: center;
      }
      .iconfont{
        display:flex;
        justify-content:center;
        width:46px;
        height:46px;
        border-radius:50%;
        font-size:27px;
        color: #fff;
        align-items:center;
      }
      .item-iconfont{
        display:flex;
        width: 100%;
        padding:0 0 4px;
        justify-content:center;
        text-align: center;
      }
    }
    .module-qiangdan{
      background: #fff;
      padding:12px 16px;
      .iconfont{
        font-size: 14px;
        color: #333;
        &:before{
           color: #007EE5;
           margin-right: 6px;
         }
      }
      .count{
        padding:0 1px;
        color: red;
        font-size: 18px;
      }
    }
    .module-my-store{
      .store-header{
        background:#007EE5;
        padding:11px 0;
        text-align: center;
        font-size: 16px;
        color: #fff;
      }
      .title{
        position: relative;
        display: inline-block;
        padding-right: 20px;
        &:after{
           position: absolute;
           top: 10px;
           right: 0;
           content: '';
           border:5px solid transparent;
           border-top:5px solid #fff;
         }
      }
      &.active{
        .store-header .title:after{
          top: 5px;
          border:5px solid transparent;
          border-bottom:5px solid #fff;
        }
        .store-body{
          height:86px;
        }
       }
      .store-body{
        background:#585d7b;
        height: 0;
        overflow: hidden;
        transition: all .3s;
      }
      .store-list{
        display: flex;
        padding:16px 20px;
        .item{
          width:25%;
          color: #787d9b;
          text-align: center;
          &.active{
             color: #fff;
            .iconfont{
              background: #fff;
              color:#007EE5;
              font-weight: bold;
            }
           }
        }
        .iconfont{
          display: block;
          width: 36px;
          height: 36px;
          margin:0 auto 4px;
          line-height: 36px;
          font-size: 24px;
          border-radius: 3px;
          background:#737896;
          color: #fff;
        }
        .item-title{
          display: block;
          margin:6px 0 0;
          padding:0 3px;
          height: 16px;
          overflow: hidden;
        }
      }
    }
  }

</style>
